@charset "utf-8"; 

@import "common/reset.scss";
@import "common/common.scss"; 


main{
    overflow-y:scroll ;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: r(120px);

    .slider{
        width: 100%;       
        .slider_img{ 
            position: relative;           
            height: 100%;           
            img{
                display: block; 
                width: 100%;         
            }
            ul{
                position: absolute;
                height: r(10px);
                width: 100%;
                background:rgba(0,0,0,.5);
                bottom:r(90px);
                li{
                    height: 100%;
                    float: left;
                    width: 20%;
                }
                .li_background{
                    background: #c4c3c4;
                }            
            }
            
        }
    }
    .around{
        height: r(65px);
        line-height: n(65px);
        margin-top: r(34px);
        .ju_left{
            padding-left: r(21px);
            vertical-align: middle;
            .iconfont{
                font-size: (30px);
                color: $color;
                vertical-align: middle;
                
            }
            img{
                width: r(56px);
                height: r(54px);
                vertical-align: middle;
            }
            .text_l{
                padding-left: r(9px);
                font-size: r(30px);
                vertical-align: middle;
                
            }
        }
        .ju_right{
            padding-top: r(10px);
            vertical-align: middle;
            padding-right: r(21px);
            .text_r{
                vertical-align: middle;
                padding-right: r(9px);
                font-size:r(24px);
            }
            img{
                vertical-align: middle;
                width: r(25px);
                height: r(26px);
                vertical-align: middle;
            }
        }
    }
    .test{
        background: red;
        width: r(710px);
        height: 100px;
        margin: 0 auto;
    }
    .luck_img{
        width: 100%;
        text-align: center;
        max-height: r(93px);
        margin-bottom: r(30px);
        img{
            width:r(240px);           
        }
        .luck_left{           
            padding-left: r(77px);
            
        }
        .luck_right{
             padding-right: r(90px);
        }
    }
    .store_minute{
        padding-top: r(28px);
        .store{
            padding-left: r(20px);
            img{
                width: r(212px);
                height: r(165px);
            }
        }
        .shop_img{
            img{
                height: r(176px);
            }
        }
        .middle{
            display: inline-block;
            padding-left: r(22px);
            padding-top: r(28px);
            line-height: r(45px);
            .store_title{
                font-size: r(30px);               
            }
            .store_tao{
                font-size: r(22px);
                color: #494949;
            }
            span{
                font-size: r(32px);
                color: $color;
            }
        }
        .store_right{
            padding-right: r(14px);
            padding-top: r(32px);
            font-size:r(22px);
            color: #494949;
            .juli{
                float: right;
                padding-bottom: r(63px);
            }
        }
    }
    
}
header{
    .back{
        padding-top: r(50px);
        padding-left: r(23px);
        span{
            font-size: r(26px);
            border: 1px solid $color;
            padding: r(15px) r(30px);
            border-radius: r(8px);
        }
    }
    .classify{
        padding-top: r(50px);
        width: r(350px);
        font-size: r(26px);
        text-align: center;
        margin: auto; 
    }
    
}
main{
    .classify_more{
         width: 100%;
         text-align: center;
        ul{
           
            li{
               list-style: none;
               float: left; 
               width: 25%;
               margin: auto;
               text-align: center;
               font-size: r(26px);
               height: r(150px);
               border-radius: 50%;
               img{
                    display: inline-block;
                    height: 100%;
                    border-radius: 50%;
               }
               a{
                   height: 100%;
                   color: #000;
               }
            }
        }
    }
    .btn_span{
        width: 100%;
        text-align: center;
        padding-top: r(50px);
        .on{
            background: $color;
        }
        span{
            display: inline-block;
            height: r(17px);
            width: r(17px);
            border-radius: 50%;
            background: #ffc9a1;
        }
    }
    .classify_much{
        width: 100%;
        text-align: center;
        padding-top: r(37px);
        ul{
            li{
                float: left;
                width: 25%;
                img{
                    height: r(133px);
                }
            }
        }
    }
    .margin_bottom{
        margin-bottom: r(60px);
    }
    //product
    .product_bg{
        width: 100%;
        padding-left:r(25px);
        padding-right:r(25px);
        height: r(259px);
        img{
            height: 100%;
        }
    }
    .around_paddingtop{
        padding-top: r(20px);
    }
    .around{
        .pro_left{
            font-size: r(72px);
            color: $color;
        }
        .pro_right{
            font-size: r(30px);
            background: $color;
            color: #fff;
            padding: r(17px) r(27px) ;
            border-radius: 5px;
        }
        .ju_left{
            .font{
                font-size: r(36px);
                padding-left: r(12px);
                
            }
            .text_l{
                font-size: r(30px);
            }
            .text_r{
                font-size: r(30px);
                color: $color;
                vertical-align: middle;
            }
        }
        .good_right{
            font-size: r(26px);
            color: #8e8e8e;
        }
        .first_img{
            img{
                height: r(74px);
                width: r(57px);
                margin-right: r(33px);
            }
        }
        .tow_img{
            img{
                width: r(71px);
                height: r(74px);
                margin-right: r(20px);
            }
        }
        .three_img{
            img{
                width:r(94px);
                height: r(58px);
                padding-right: r(3px);
            }
        }
        .forus_img{
            img{
                width: r(59px);
                height: r(59px);
                 margin-right: r(30px);
            }
        }
        .five_img{
            img{
                width: r(78px);
                height: r(79px);
                margin-right: r(10px);
            }
        }
        .six_img{
            img{
                width:r(84px) ;
                height: r(59px);
                margin-right: r(3px);
            }
        }
    }
    .apply{
        margin-left: r(40px);
        margin-right: r(30px);
        background: $color;
        font-size:r(30px);
        color: #fff;       
        .ju_left{
            padding-top: 0.5rem;
        }
    }
    .just_shop{
        padding-top:r(10px) ;
        padding-left: r(20px);
        padding-right: r(30px);
        position: relative;
        .middle{
            padding-top: 0px;
            .store_tao{
                font-size: r(26px);
            }
            .iconfont{
            color: $color;
            }
            .look_detail{
                font-size: r(20px);
                a{
                    color: $color;
                }
            }
        }
        .goin{
            background: $color;            
            font-size: r(30px);
            padding: r(15px) r(27px);
            border-radius: r(16px);
            a{
                color: #fff;
                width: 100%;
                height: 100%;
            }
        }
        .store_right{
            padding-top: r(68px);
            padding-right: 0;
        }
    }
    
    .search{
            width:r(269px);
            height: r(55px);
            border-radius: r(55px);
            margin:0 auto;
            border: r(3px) solid $color;
            box-sizing: border-box;
            margin-top: r(34px);
            padding-left: r(20px);
            padding-right: r(15px);
            position: relative;
            input[type='text']{
                height: 100%;
                border: none;
                width: r(191px);
                color: #777777;
                font-size: r(24px);
            }
                .iconfont{
                    position: absolute;
                    font-size: r(34px);
                    right: r(12px);
                    color: $color;
                    top: r(8px);
                }           
    }
    .resou{
        font-size: r(26px);
        width:100%;
        text-align: center;
        padding-top: r(32px);
        padding-bottom: r(13px);
    }
    .resou_text{
        width: 100%;
        margin: auto;
        ul{
            width: r(540px);
            margin: auto;
            li{
                width: r(125px);
                height: r(64px);
                text-align: center;
                line-height: r(64px);
                float: left;
                font-size: r(20px);
                background: #dcdcdc;

                margin-right: 4px;
                margin-bottom: 3px;
                a{
                    color: #898989;  
                    display: block;
                }
            }
        }
    }
    .position_img{       
        height: r(352px);
        width:r(710px);
        margin: auto;
        a,img{
            display: block;
            height: 100%;
        }
        .find_imgl{
            display: inline-block;
            width: r(280px);
            height: 100%;
            padding-left: r(20px);
            img{
                height: 100%;
                width: 100%;
                display: block;
            }
        }
        .find_imgr{
            width: r(420px);
            float: right;
            display: inline-block;
            .find_imgt{
                padding-bottom: r(9px);
                img{
                    width: 100%;
                }
                
            }
            .find_imgbl{
                display: inline-block;
                width: r(195px);
                height: r(195px);
                img{
                    height: 100%;
                    width: 100%;
                }
            }
            .find_imgbr{
                display: inline-block;
                width: r(214px);
                height: r(195px);
                float:right;
                img{
                    width: 100%;
                }
            }
        }
    }
    .classify_recommend{
        width: 100%;
        text-align: center;
        ul{
            li{
                float: left;
                width: 33.3%;
                text-align: center;
                img{
                    width: r(225px);
                    height: 100%;
                }
            }
        }
    }
    .around .remen{
        padding-left: r(40px);
    }
    //myrder
    .my_log{
        position: relative;
        padding-left: r(23px);
        padding-right: r(23px);
        .people_log{
            width: r(170px);
            height: r(170px);
            border-radius: 50%;
            overflow: hidden;
            padding-right: r(25px);
            img{
               width: 100%;
               border-radius: 60%;
            }
        }
        .cleck_log{
            margin: auto;
            padding-top: r(30px);
            .cleck_logt{
                font-size: r(30px);
                padding-bottom: r(38px);
                a{
                    color: #000;
                }
            }
            .cleck_logb{
                font-size: r(26px);
                color: #9d9d9d;
                
            }
        }
        .log_right{
            font-size: r(80px);
            position: absolute;
            right: r(22px);
            top: r(30px);
            
        }
    }
    .log_middle{
        width: 100%;
        padding-left:r(23px) ;
        padding-right: r(23px);
        .log_dian{
            padding-top: r(20px);
            height:r(150px);
            width: r(195px);
            text-align: center;
            background: #b2e0a0;
            img{
                width: r(79px);
                height: r(82px);
            }
        }
        .log_shou{
            padding-top: r(20px);
            height:r(150px);
            width: r(195px);
            text-align: center;
            background: #a0dce0;
            margin: auto;
            .iconfont{
                font-size: r(65px);
                color: #fff;
            }
        }
        .log_quan{
            padding-top: r(20px);
            height:r(150px);
            width: r(195px);
            text-align: center;
            background: #e0b7a0;
            display: inline-block;
            img{
                width:r(124px);
                height: r(91px);
            }
        }
    }
    .but_text{
        width: r(550px);
        margin: auto;
        padding-top: r(40px);
        a{
            width: 100%;
            height: 100%;
            color: #fff;
        }
        .button{
            font-size: r(24px);
            background: $color;
            color: #fff;
            padding: r(23px) r(50px);
            border-radius: r(50px);
            
        }
        .but_left{
            margin-right: r(245px);
        }
    }
}
